<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    refresh_interVal: null, //接收父组件的刷新间隔值
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: [Object,Array],
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      timer: null, //定义一个刷新的timer
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  
  methods: {
    
    initChart() {
      if(this.chart){
        this.chart.dispose();
      }
        this.chart = echarts.init(this.$el, "macarons");
        this.chart.clear();
        this.setOptions(this.chartData);
      
    },
    setOptions(val) {
      console.log(val); 
      //  this.chart = echarts.init(this.$el, 'macarons')
      var seriesData = val.yAxisData;
      // 万达  南河新村  日杂市场  安居  航天和美  天庆嘉园 
      // 广电中心  均家滩  尚东嘉园  康乐花园
      var colorList = [];
      var date = new Date();
      var month = date.getMonth() + 1;
      for (var i = 1; i <= val.totalLength; i++) {
        if (i <= val.colorLength) {
          colorList.push('#FF9502');
        } else {
          colorList.push('#00BB7A');
        }
      }
      var option = {
        color: ['#FF9502', '#00BB7A'],
        tooltip: {
          trigger: 'item',
          formatter: '业务统计数据:{c0}',
          backgroundColor: 'rgba(255,255,255,0.7)',
          borderColor: 'rgba(255,255,255,0.8)',
          borderWidth: 1,
          borderRadius: 5,
          textStyle: {
            color: '#333',
          },
          triggerOn: 'mousemove',
          enterable: true,
          position: function (point, params, dom, rect, size) {
            //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
            var x = point[0];//
            var y = point[1];
            var viewWidth = size.viewSize[0];
            var viewHeight = size.viewSize[1];
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            var posX = 0;//x坐标位置
            var posY = 0;//y坐标位置

            if (x < boxWidth) {//左边放不开
              posX = 5;
            } else {//左边放的下
              posX = x - boxWidth;
            }

            if (y < boxHeight) {//上边放不开
              posY = 5;
            } else {//上边放得下
              posY = y - boxHeight;
            }

            return [posX, posY];

          }
        },
        grid: {
          top: '20%',
          left: '0',
          right: '3%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            //            
            //       
            data: val.xAxisData,
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#7B7B7B',
                width: 1,
              },
            },
            axisLabel: {
              interval: 0,    // 显示全部标签
              rotate: 0,    // 逆时针旋转30度
              width: 80,     // 固定标签宽度
              overflow: 'break' // 超长文本换行
            }

          }
        ],
        yAxis: [
          {
            name: '',
            type: 'value',
            // scale : true,
            // splitNumber : 2,
            // boundaryGap : [ 0, 0.2 ],
            splitLine: {
              lineStyle: {
                type: 'dashed', // 线类型为虚线
                color: '#C7C7CC' // 虚线颜色
              }
            },
            axisLine: {
              lineStyle: {
                color: '#7B7B7B',
                width: 1,
              },
            },
          }
        ],
        series: [{
          type: 'bar',
          data: seriesData,
          barWidth: '17px',
          barGap: '200%',
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          barMaxWidth: '30px',
          label: {
            normal: {
              show: false,
              position: 'top',
              formatter: '{c}'
            }
          }
        }],
      };
      this.chart.setOption(option);

    }
  }
}
</script>
